<template>
  <div class="table-container">
    <a-table
      :row-key="rowKey"
      :data="(data as TableData[])"
      :bordered="bordered"
      :hoverable="hoverable"
      :stripe="stripe"
      :loading="loading"
      :scrollbar="scrollbar"
      :draggable="draggable"
      :scroll="scroll"
      :pagination="pagination"
      :sticky-header="stickyHeader"
      :table-layout-fixed="tableLayoutFixed"
      @row-click="handleRowClick"
      @change="handleChange"
    >
      <template #columns>
        <a-table-column
          v-for="(t, i) in columns"
          :key="i"
          :data-index="t.dataIndex"
          :width="t.width || undefined"
          v-bind="{ title: t.titleSlotName ? undefined : t.title, ...t }"
        >
          <template v-if="t.titleSlotName" #title>
            <slot :name="t.titleSlotName"></slot>
          </template>
          <template v-if="t.slotName" #cell="{ record, column, rowIndex }">
            <slot
              :name="t.slotName"
              :record="record"
              :column="column"
              :rowIndex="rowIndex"
            ></slot>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div v-if="showPagination">
      <a-pagination
        :total="total"
        :current="current"
        :page-size="pageSize"
        :show-total="showTotal"
        :show-jumper="showJumper"
        :show-more="showMore"
        :show-page-size="showPageSize"
        :page-size-options="(pageSizeOptions as number[])"
        @change="handleCurrentChange"
        @page-size-change="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  // @ts-nocheck
  import { TableColumnData, TableData } from '@arco-design/web-vue';

  const props = defineProps({
    // 表格相关属性
    rowKey: {
      type: String,
      default: 'key',
    },
    columns: {
      type: Array,
      default: <TableColumnData>[],
    },
    data: {
      type: Array,
      default: <TableData>[],
    },
    height: {
      type: Number,
      default: 0,
    },
    bordered: {
      type: Boolean,
      default: false,
    },
    hoverable: {
      type: Boolean,
      default: true,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    scroll: {
      type: Object,
      default: null,
    },
    scrollbar: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    stickyHeader: {
      type: Boolean,
      default: false,
    },
    // 分页相关属性
    total: {
      type: Number,
      default: 1,
    },
    current: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageSizeOptions: {
      type: Array,
      default: [10, 20, 30, 40, 50],
    },
    showTotal: {
      type: Boolean,
      default: false,
    },
    showMore: {
      type: Boolean,
      default: false,
    },
    showJumper: {
      type: Boolean,
      default: false,
    },
    showPageSize: {
      type: Boolean,
      default: false,
    },
    tableLayoutFixed: {
      type: Boolean,
      default: false,
    },
    draggable: {
      type: Object,
      default: null,
    },
  });

  const emit = defineEmits([
    'handleSizeChange',
    'handleCurrentSizeChange',
    'change',
  ]);

  const handleCurrentChange = (size: number) => {
    emit('handleSizeChange', size);
  };

  const handlePageSizeChange = (pageSize: number) => {
    emit('handleCurrentSizeChange', pageSize);
  };

  const handleRowClick = (row: TableData, ev: Event) => {
    emit('handleRowClick', { row, ev });
  };
  const handleChange = (data: TableData[], extra: TableChangeExtra) => {
    emit('change', { data, extra });
  };
</script>

<style lang="less" scoped>
  .table-container {
    // height: 100%;
    :deep(.arco-table) {
      color: #333;
      height: calc(100% - 46px);
      .arco-table-container {
        height: 100%;
        .arco-table-content {
          height: 100%;
          > :nth-of-type(2) {
            height: 100%;
          }
          .arco-table-body {
            height: 100%;
            background: white;
            .arco-table-element {
              max-height: 100%;
              .arco-empty {
                margin-top: 80px;
              }
            }
          }
        }
      }
      .arco-table-tr {
        height: 54px;
      }
    }
    :deep(.arco-card-body) {
      color: #333;
    }
  }
</style>
